<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" xmlns:th="http://www.thymeleaf.org">
    <title>Login</title>
    <link th:href="@{/css/style.css}" href="../static/css/style.css" rel="stylesheet">
    <link th:href="@{/css/style-responsive.css}" href="../static/css/style-responsive.css" rel="stylesheet">
    <script src="../static/js/jquery-1.10.2.min.js" th:src="@{/webjars/jquery/3.6.0/jquery.min.js}"></script>
</head>

<body class="login-body">
<div class="container">
    <form class="form-signin" th:action="@{/user/login}" action="/user/login">
        <div class="form-signin-heading text-center">
            <h1 class="sign-title">登录</h1>
            <img th:src="@{/images/login-logo.png}" src="../static/images/login-logo.png" alt=""/>
        </div>

        <div class="login-wrap">
            <input type="text" name="email" class="form-control" placeholder="User Email" autofocus>
            <input type="password" name="password" class="form-control" placeholder="Password">
            <input type="checkbox" name="remember_me"> 记住我
            <p class="registration" th:text="${error}" style="color: red"></p>
            <button class="btn btn-lg btn-login btn-block" type="submit" id="loginBtn">
                登录
            </button>

            <div class="registration">
                不会会员?
                <a class="" href="/user/toRegistration">
                    注册
                </a>
            </div>
            <label class="checkbox">

        <span class="pull-right">
                    <a data-toggle="modal" href="#myModal"> 忘记密码?</a>
                </span>
            </label>
        </div>

        <!-- modal -->
    </form>
    <!-- Modal -->
    <div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="myModal"
         class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">Forgot Password ?</h4>
                </div>
                <div class="modal-body">
                    <form action="reset_password.html" method="get">
                        <p>在下方输入你的电子邮件地址以重设密码.</p>
                        <div class="form_body">
                            <input type="email" id="email" placeholder="请输入登录邮箱" name="email" class="form-control">
                            <div class="form-group">
                                <label for="zym">请输入验证码</label>
                                <input type="email" class="form-control" id="zym" name="zym">
                            </div>
                            <input type="button" class="btn btn-default" id="yzmBtn" value="发送验证码">
                        </div>
                        <div class="modal-footer">
                            <button data-dismiss="modal" class="btn btn-default" type="button">跳过</button>
                            <input type="submit" class="btn btn-primary" value="提交" onclick="return validate()">
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script th:src="@{/js/bootstrap.min.js}" src="../static/js/bootstrap.min.js"></script>
<script th:src="@{/js/modernizr.min.js}" src="../static/js/modernizr.min.js"></script>

<script>
    $(function () {

        /*$("#loginBtn").click(function (){
            let form = $(".form-signin").serialize();
            alert(form)
            $.ajax({
                url: "/user/login",
                data: form,
                type: "GET",
                success: function (data){
                    alert(data)
                }
            })
        });*/

        $("#yzmBtn").click(function () {
            //ajax
            let email = $("#email").val();
            console.log(email)
            if (null != email && email != "") {
                let params = {"email": email};
                $.ajax({
                    url: "/user/sendEmail",
                    type: "POST",
                    data: params,
                    success: function (data) {
                        if (data.msg == "success") {
                            alert("邮件发送成功");
                        } else {
                            alert("邮箱发送失败")
                        }
                    }
                })
                //倒计时
                let time = 60;
                let timer = setInterval(function () {
                    if (time > 0) {
                        $("#yzmBtn").attr("disabled", "disabled");
                        $("#yzmBtn").val(time + "s后重新获取");
                        time--;
                        // alert(time--);
                    } else {
                        clearInterval(timer);
                        $("#yzmBtn").removeAttr("disabled");
                        $("#yzmBtn").val("获取验证码");
                    }
                }, 1000);
            } else {
                alert("邮箱不能为空");
            }
        });
    });
</script>


</body>
</html>
